import React from 'react'
import { cn } from '~/utils';
type BtnType = 'copy' | 'like' | 'unLike' | 'create';

interface MessageIconProps {
    className?: string;
    type: BtnType;
    onClick?: (e: any) => void;
}

const MessageIcon: React.FC<MessageIconProps> = ({ className = '', type, onClick }) => {
    const icons = {
        copy: (
            <svg className={cn('transition text-gray-400 hover:text-gray-500', className)} onClick={onClick} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Group 488">
                    <rect id="Rectangle 231" x="5.75" y="5.75" width="12.5" height="13.5" rx="2.25" fill="transparent"
                        stroke="currentColor" stroke-width="1.5" />
                    <rect id="Rectangle 232" x="8.75" y="4.75" width="6.5" height="3.5" rx="1.25" fill="transparent"
                        stroke="currentColor" stroke-width="1.5" />
                </g>
            </svg>
        ),
        like: (
            <svg className={cn('transition text-gray-400 hover:text-gray-500', className)} onClick={onClick} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Group 489">
                    <rect id="Rectangle 231" x="4.75" y="9.75" width="3.5" height="8.5" rx="1.75" fill="transparent"
                        stroke="currentColor" stroke-width="1.5" />
                    <g id="Union">
                        <mask id="path-2-inside-1_399_44" fill="#fff">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M13.2231 4C12.1561 4 11.1694 4.56673 10.6318 5.48839L8.89567 8.46456C8.05682 8.99647 7.5 9.93321 7.5 11V16C7.5 17.6569 8.84315 19 10.5 19H14.6983C16.3803 19 17.8826 17.9477 18.4575 16.367L20.2802 11.3544C20.8731 9.7239 19.6657 8 17.9307 8H14.5V5C14.5 4.44772 14.0523 4 13.5 4H13.2231Z" />
                        </mask>
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M13.2231 4C12.1561 4 11.1694 4.56673 10.6318 5.48839L8.89567 8.46456C8.05682 8.99647 7.5 9.93321 7.5 11V16C7.5 17.6569 8.84315 19 10.5 19H14.6983C16.3803 19 17.8826 17.9477 18.4575 16.367L20.2802 11.3544C20.8731 9.7239 19.6657 8 17.9307 8H14.5V5C14.5 4.44772 14.0523 4 13.5 4H13.2231Z"
                            fill="transparent" />
                        <path
                            d="M10.6318 5.48839L9.33611 4.73258V4.73258L10.6318 5.48839ZM8.89567 8.46456L9.69893 9.73136L10.0073 9.5358L10.1913 9.22037L8.89567 8.46456ZM18.4575 16.367L19.8672 16.8796V16.8796L18.4575 16.367ZM20.2802 11.3544L21.6899 11.867L20.2802 11.3544ZM14.5 8H13V9.5H14.5V8ZM11.9274 6.24419C12.1963 5.78337 12.6896 5.5 13.2231 5.5V2.5C11.6226 2.5 10.1426 3.3501 9.33611 4.73258L11.9274 6.24419ZM10.1913 9.22037L11.9274 6.24419L9.33611 4.73258L7.6 7.70876L10.1913 9.22037ZM9 11C9 10.4682 9.27563 9.99977 9.69893 9.73136L8.09241 7.19777C6.83801 7.99317 6 9.3982 6 11H9ZM9 16V11H6V16H9ZM10.5 17.5C9.67157 17.5 9 16.8284 9 16H6C6 18.4853 8.01472 20.5 10.5 20.5V17.5ZM14.6983 17.5H10.5V20.5H14.6983V17.5ZM17.0478 15.8544C16.6885 16.8423 15.7496 17.5 14.6983 17.5V20.5C17.0111 20.5 19.0768 19.0531 19.8672 16.8796L17.0478 15.8544ZM18.8705 10.8417L17.0478 15.8544L19.8672 16.8796L21.6899 11.867L18.8705 10.8417ZM17.9307 9.5C18.6247 9.5 19.1077 10.1896 18.8705 10.8417L21.6899 11.867C22.6386 9.25824 20.7066 6.5 17.9307 6.5V9.5ZM14.5 9.5H17.9307V6.5H14.5V9.5ZM13 5V8H16V5H13ZM13.5 5.5C13.2239 5.5 13 5.27614 13 5H16C16 3.61929 14.8807 2.5 13.5 2.5V5.5ZM13.2231 5.5H13.5V2.5H13.2231V5.5Z"
                            fill="currentColor" mask="url(#path-2-inside-1_399_44)" />
                    </g>
                </g>
            </svg>
        ),
        unLike: (
            <svg className={cn('transition text-gray-400 hover:text-gray-500', className)} onClick={onClick} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Group 490">
                    <g id="Group 491">
                        <rect id="Rectangle 231" x="19.25" y="14.25" width="3.5" height="8.5" rx="1.75"
                            transform="rotate(-180 19.25 14.25)" fill="transparent" stroke="currentColor" stroke-width="1.5" />
                        <g id="Union">
                            <mask id="path-2-inside-1_399_50" fill="#fff">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M10.0061 20C10.9504 20 11.8395 19.5554 12.4061 18.8L14.6872 15.7586C15.7568 15.3 16.5061 14.2375 16.5061 13L16.5061 8C16.5061 6.34315 15.163 5 13.5061 5L9.30781 5C7.62579 5 6.12346 6.05227 5.54864 7.63302L3.72587 12.6456C3.13298 14.2761 4.34044 16 6.07535 16L9.17277 16L8.70017 18.8356C8.59858 19.4451 9.06862 20 9.68656 20L10.0061 20Z" />
                            </mask>
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M10.0061 20C10.9504 20 11.8395 19.5554 12.4061 18.8L14.6872 15.7586C15.7568 15.3 16.5061 14.2375 16.5061 13L16.5061 8C16.5061 6.34315 15.163 5 13.5061 5L9.30781 5C7.62579 5 6.12346 6.05227 5.54864 7.63302L3.72587 12.6456C3.13298 14.2761 4.34044 16 6.07535 16L9.17277 16L8.70017 18.8356C8.59858 19.4451 9.06862 20 9.68656 20L10.0061 20Z"
                                fill="transparent" />
                            <path
                                d="M12.4061 18.8L13.6061 19.7L13.6061 19.7L12.4061 18.8ZM14.6872 15.7586L14.0961 14.3799L13.7277 14.5379L13.4872 14.8586L14.6872 15.7586ZM5.54864 7.63302L4.13895 7.12041L4.13895 7.12041L5.54864 7.63302ZM3.72587 12.6456L2.31618 12.133L3.72587 12.6456ZM9.17277 16L10.6524 16.2466L10.9435 14.5L9.17277 14.5L9.17277 16ZM8.70017 18.8356L10.1798 19.0822L10.1798 19.0822L8.70017 18.8356ZM11.2061 17.9C10.9228 18.2777 10.4782 18.5 10.0061 18.5L10.0061 21.5C11.4225 21.5 12.7563 20.8331 13.6061 19.7L11.2061 17.9ZM13.4872 14.8586L11.2061 17.9L13.6061 19.7L15.8872 16.6586L13.4872 14.8586ZM15.0061 13C15.0061 13.6164 14.634 14.1493 14.0961 14.3799L15.2782 17.1372C16.8796 16.4507 18.0061 14.8586 18.0061 13L15.0061 13ZM15.0061 8L15.0061 13L18.0061 13L18.0061 8L15.0061 8ZM13.5061 6.5C14.3345 6.5 15.0061 7.17157 15.0061 8L18.0061 8C18.0061 5.51472 15.9914 3.5 13.5061 3.5L13.5061 6.5ZM9.30781 6.5L13.5061 6.5L13.5061 3.5L9.30781 3.5L9.30781 6.5ZM6.95833 8.14564C7.31759 7.15767 8.25655 6.5 9.30781 6.5L9.30781 3.5C6.99503 3.5 4.92933 4.94687 4.13895 7.12041L6.95833 8.14564ZM5.13556 13.1583L6.95833 8.14564L4.13895 7.12041L2.31618 12.133L5.13556 13.1583ZM6.07535 14.5C5.38139 14.5 4.8984 13.8104 5.13556 13.1583L2.31618 12.133C1.36755 14.7418 3.29949 17.5 6.07535 17.5L6.07535 14.5ZM9.17277 14.5L6.07535 14.5L6.07535 17.5L9.17277 17.5L9.17277 14.5ZM10.1798 19.0822L10.6524 16.2466L7.69318 15.7534L7.22058 18.589L10.1798 19.0822ZM9.68656 18.5C9.99553 18.5 10.2306 18.7774 10.1798 19.0822L7.22058 18.589C6.96661 20.1128 8.14171 21.5 9.68656 21.5L9.68656 18.5ZM10.0061 18.5L9.68656 18.5L9.68656 21.5L10.0061 21.5L10.0061 18.5Z"
                                fill="currentColor" mask="url(#path-2-inside-1_399_50)" />
                        </g>
                    </g>
                </g>
            </svg>
        ),
        create: (
            <svg className={cn('transition text-gray-400 hover:text-gray-500', className)} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23591" width="32" height="32"><path d="M512 64c244.906667 0 443.946667 196.544 447.936 440.533333L960 512a42.666667 42.666667 0 0 1-85.226667 3.2L874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512c0 65.066667 17.088 127.488 49.109334 182.378667l17.024 29.184-31.872 116.842666 116.842666-31.872 29.184 17.024a360.256 360.256 0 0 0 172.117334 48.96L512 874.666667a42.666667 42.666667 0 0 1 3.2 85.226666L512 960c-82.154667 0-159.146667-22.122667-225.365333-60.714667L132.757333 941.226667a40.746667 40.746667 0 0 1-50.005333-50.005334l41.962667-153.877333A445.930667 445.930667 0 0 1 64 512C64 264.576 264.576 64 512 64z m256 512a42.666667 42.666667 0 0 1 42.666667 42.666667v106.666666h106.666666a42.666667 42.666667 0 1 1 0 85.333334h-106.688L810.666667 917.333333a42.666667 42.666667 0 1 1-85.333334 0l-0.021333-106.666666H618.666667a42.666667 42.666667 0 1 1 0-85.333334h106.666666v-106.666666a42.666667 42.666667 0 0 1 42.666667-42.666667z" fill="currentColor" fill-opacity=".85" p-id="23592"></path></svg>
        )
    };

    const Icons = (type: string) => {
        switch (type) {
            case 'copy':
                return icons.copy;
            case 'like':
                return icons.like;
            case 'unLike':
                return icons.unLike;
            case 'create':
                return icons.create;
            default:
                return null;
        }
    }

    return Icons(type);
};


export default MessageIcon